<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-08 15:35:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-02-26 21:25:03
-->
<template>
  <div class="large-screen">
    <span class="p1"></span>
    <span class="p2"></span>
    <span class="p3"></span>
    <span class="p4"></span>
    <Header />
    <Amap ref="amap" />
  </div>
</template>

<script lang="ts" setup>
  import DevicePixelRatio from '@/utils/resetWindows';
  import Amap from './components/amap.vue';
  import Header from './components/header.vue';
  import { nextTick } from 'vue';
  // 布局缩放兼容不同分辨率
  //  const device = new DevicePixelRatio();
  //  device.init();
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  console.log('Viewport Width:', viewportWidth);
  console.log('Viewport Height:', viewportHeight);
  let zomm = 1;
  if (viewportWidth < 1600) {
    zomm = 1.1;
  }
  nextTick(() => {
    ((document.querySelector('.large-screen') as any).style as any).zoom = zomm / window.devicePixelRatio;
  });
</script>

<style lang="less" scoped>
  .large-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #383838;
    .p1,
    .p2,
    .p3,
    .p4 {
      position: absolute;
      display: block;
    }
    .p1,
    .p2 {
      height: 23px;
      width: calc(100% - 24px);
    }
    .p3,
    .p4 {
      width: 3px;
      height: calc(100% - 24px);
    }
    .p1 {
      top: 5px;
      left: 12px;
      background: url('@/assets/images/img-26.png') no-repeat;
      background-size: 100%;
    }
    .p2 {
      bottom: 5px;
      left: 12px;
      background: url('@/assets/images/img-27.png') no-repeat;
      background-size: 100%;
      z-index: 1;
    }
    .p3 {
      top: 10px;
      right: -12px;
      background: url('@/assets/images/img-28.png') no-repeat;
      z-index: 1;
    }
    .p4 {
      top: 10px;
      left: 12px;
      background: url('@/assets/images/img-29.png') no-repeat;
      z-index: 1;
    }
  }
</style>
